﻿<!DOCTYPE html>
<html>
        <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <title></title>
        <link href="file:jquery-mobile/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>
        <link href="file:jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/>
        <script src="file:jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
        <script src="file:jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
        <script type="text/javascript">
			function calcular(){
				// pegando o id do formulario
				var formulario = document.getElementById("formulario");	
				
				// kilos é minha variavel
				// formulario é o id do meu formulario
				// value é o valor do input
				// o + na frente transforma em number a string	
					
				var kilos  		= +formulario.kilos.value;
				var metros 		= +formulario.metros.value;
				var centimetros = +formulario.centimetros.value;
				
				// altura
				var altura = (metros * 100 + centimetros) / 100;
				 
				// imc
				var imc = kilos / (altura * altura);
				
				// o metodo toFixed fixa apenas duas casas decimais apos o ponto.
				formulario.imc.value = imc.toFixed(2);
				
				if(imc < 20)
				{
					alert('Você esta abaixo do peso!');
				} 
				else if(imc >20 && imc <= 25)
				{
					alert("Peso Ideal");
				}
				else if(imc >25 && imc <= 30)
				{
					alert("Sobrepeso");
				}
				else if(imc >30 && imc <= 35)
				{
					alert("Obesidade Moderada");
				}
				else if(imc >35 && imc <= 40)
				{
					alert("Obesidade Severa");
				}
				else if(imc >40 && imc <= 50)
				{
					alert("Obesidade Morbida");
				}
				else
				{
					alert('Gordo');
				}
				
			}
			
		</script>
        </head>
		<body>
            <div data-role="page" id="Base">
                <div data-role="header">
                	<a data-role="button" data-direction="reverse" data-theme="a"
        href="index.html" rel="external" data-icon="arrow-l" data-iconpos="notext" class="ui-btn-left" data-transition="slide">
        </a>
                    <a data-role="button" data-theme="a"
        href="Exercicios.html" rel="external" data-icon="arrow-r" data-iconpos="notext" class="ui-btn-right" data-transition="slide">
        </a>
                    <h1>Alimentação</h1>
                </div>
                
                <div data-role="content">
                <div data-role="collapsible-set" >
                    <div data-role="collapsible" data-collapsed="true" data-theme="a">
					
					<h3>
                            Proposito 1
                    </h3>
		
					<ul data-role="listview"  data-inset="true" >
						<li><a href="#dieta1" >Dieta 1</a></li>
						<li><a href="#dieta2">Dieta 2</a></li>
						<li><a href="#dieta3">Dieta 3</a></li>
					</ul>
				</div>
			</div>
                 <div data-role="collapsible-set">
                    <div data-role="collapsible" data-collapsed="true" data-theme="a">
					
                    <h3>
                            Calcule o seu IMC
                    </h3>
					<form id="formulario">
                        <fieldset>
                            <label for="kilos">Kilos:</label>
                            <input name="kilos" type="text" />
                        
                            <label for="metros">metros:</label>
                            <input name="metros" type="text" />
                        
                            <label for="centimetros">centimetros:</label>
                            <input name="centimetros" type="text" />
                        
                            <label for="imc">imc:</label>
                            <input name="imc" type="text" disabled="disabled" />
                                
                            <a href="#" onclick="calcular();">Calcular</a>
                        </fieldset>
                        </form>
                </div>
					
			</div>
				<div data-role="collapsible-set">
                    <div data-role="collapsible" data-collapsed="true" data-theme="a">
					
					<h3>
                            Proposito 3
                    </h3>
		
					<ul data-role="listview"  data-inset="true" >
						<li><a href="#dieta1.1" >Dieta 1</a></li>
						<li><a href="#dieta2.1">Dieta 2</a></li>
						<li><a href="#dieta2.1">Dieta 3</a></li>
					</ul>
				</div>
            </div>	
		</div>
                      
                <div data-theme="a" data-role="footer" data-position="fixed">
                    <h3>
                    <div data-role="navbar" data-iconpos="top">
                        <ul>
                            <li> <a href="index.html" rel="external" data-transition="slide" data-theme="" data-icon=""> PP </a> </li>
                            <li> <a href="#ALI" data-transition="slide" data-theme="" data-icon=""> ALI </a> </li>
                            <li> <a href="Exercicios.html"  rel="external" data-transition="slide" data-theme="" data-icon=""> EXE </a> </li>
                            <li> <a href="#SER" data-transition="slide" data-theme="" data-icon=""> SER </a> </li>
                        </ul>
                    </div>
                    </h3>
                </div>
            </div>
            
		</body>
</html>
